<template>
  <a-form-model :model="form" ref="ruleForm" :label-col="labelCol"
    :wrapper-col="wrapperCol">
    <a-form-model-item
	 label="类型"
    >
      <a-select v-decorator="['type', {rules:[{required: true, message: '类型'}]}]" v-model="form.type">
        <a-select-option :value="'0'">产品</a-select-option>
        <a-select-option :value="'1'">解决方案</a-select-option>
        <a-select-option :value="'2'">服务</a-select-option>
      </a-select>
    </a-form-model-item>
	<a-form-model-item
	 label="标题"
	  ref="name"
	   prop="name"
	>
		<a-input
		  v-model="form.name"
		  @blur="
			() => {
			  $refs.name.onFieldBlur();
			}
		  "
		/>
	</a-form-model-item>
	<a-form-model-item
	  label="描述"
	>
	<a-input
	  v-model="form.description"
	  type="textarea"
	/>
	</a-form-model-item>
	<a-form-model-item
	  label="核心描述"
	>
	<a-input
	  v-model="form.core_description"
	  type="textarea"
	/>
	</a-form-model-item>
    <a-form-model-item
      label="图标"
    >
	<a-upload
	       action="https://admin.lhlzgroup.com/api/upload/img"
	      list-type="picture-card"
	      :file-list="icoList"
	      @preview="handlePreview"
	      @change="handleChangeIco"
	    >
	      <div v-if="icoList.length < 1">
	        <a-icon type="plus" />
	        <div class="ant-upload-text">
	          Upload
	        </div>
	      </div>
	    </a-upload>
	    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
	      <img alt="example" style="width: 100%" :src="previewImage" />
	    </a-modal>
    </a-form-model-item>
    <a-form-model-item
      label="封面"
    >
	<a-upload
	       action="https://admin.lhlzgroup.com/api/upload/img"
	      list-type="picture-card"
	      :file-list="fileList"
	      @preview="handlePreview"
	      @change="handleChange"
	    >
	      <div v-if="fileList.length < 1">
	        <a-icon type="plus" />
	        <div class="ant-upload-text">
	          Upload
	        </div>
	      </div>
	    </a-upload>
     <!-- <a-upload-dragger
          name="file"
          action="https://admin.lhlzgroup.com:3000/upload/img"
          @change="handleChange"
		  method="post"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
          <p class="ant-upload-text">
            点击或拖拽图片至此上传
          </p>
        </a-upload-dragger> -->
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import {uploadImg} from '@/api/upload.js'	
import {serveCreat,serveEdit} from '@/api/serve.js'	

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
const fields = ['title', 'startAt', 'owner', 'description']

export default {
  name: 'addserve',
  props: {
    record: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
     labelCol: { span: 4 },
     wrapperCol: { span: 14 },
	  previewVisible: false,
	  previewImage: '',
	  defaultFileList:[],
	  fileList:[],
	  icoList:[],
      form: {
		  type:'0',
		  name:'',
		  description:'',
		  core_description:'',
		  icon:'',
		  image:'',
	  },
    }
  },
  mounted () {
	  if (this.record.id) {
	  	this.form = JSON.parse(JSON.stringify(this.record));
		if(this.form.image!=''){
			this.fileList.push({
			  uid: '-1',
			  name: 'image.png',
			  status: 'done',
			  url: this.vuex_src+this.form.image,
			  response:{
				  url:this.form.image
			  }
			},)
		}
		if(this.form.icon!=''){
			this.icoList.push({
			  uid: '-1',
			  name: 'image.png',
			  status: 'done',
			  url: this.vuex_src+this.form.icon,
			  response:{
				url:this.form.icon
			  }
			},)
		}
	  }
  },
  methods: {
     handleCancel() {
	   this.previewVisible = false;
	 },
	 async handlePreview(file) {
	   if (!file.url && !file.preview) {
		 file.preview = await getBase64(file.originFileObj);
	   }
	   this.previewImage = file.url || file.preview;
	   this.previewVisible = true;
	 },
	 handleChange({ fileList }) {
	   this.fileList = fileList;
	 },
	 handleChangeIco({ fileList }) {
	   this.icoList = fileList;
	 },
	 upload(e){
		 console.log(e)
		let formData=new FormData();
		formData.append('file',e.file)
		console.log(formData) 
		uploadImg(formData).then(res=>{
		})
	 },
    onOk () {
		 console.log('监听了 modal ok 事件')
		if(this.record.id){
				if(this.fileList.length>0){
					 this.form.image = this.fileList[0].response.url;
				}
				if(this.icoList.length>0){
					 this.form.icon = this.icoList[0].response.url;
				}
			 // 编辑
				return new Promise(resolve => {
					serveEdit(this.form).then(res=>{
					  resolve(true)
					})
				})
		}else{
			 // 创建
			 if(this.fileList.length>0){
				 this.form.image = this.fileList[0].response.url;
			 }
			 if(this.icoList.length>0){
				 this.form.icon = this.icoList[0].response.url;
			 }
			 return new Promise(resolve => {
			 	serveCreat(this.form).then(res=>{
			 	  resolve(true)
			 	})
			 })
		}
    },
    onCancel () {
      console.log('监听了 modal cancel 事件')
      return new Promise(resolve => {
        resolve(true)
      })
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.visible = true
      validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
        }
      })
    }
  }
}
</script>
